<!--当前对局看板召唤师卡片-->
<!--召唤师卡片最需要什么信息？
1. 单双/灵活的段位
2. 近n场的游戏战绩
3. 玩家大区
4. 标记的数据
-->
<script setup lang="js">
import LcuProfile from "@share/components/lcu/LcuProfile.vue";
import LcuTierIcon from "@share/components/lcu/LcuTierIcon.vue";
import CareerHiddenDisplay from "@share/components/lcu/CareerHiddenDisplay.vue";
import LcuSummonerName from "@share/components/lcu/LcuSummonerName.vue";
import LcuChampionProfile from "@share/components/lcu/LcuChampionProfile.vue";
import KDA from "@share/components/lcu/KDA.vue";
import GameDetailRecordOverview
  from "@/renderer/main-window/components/gamerecord/overview/GameDetailRecordOverview.vue";
import {computed, defineProps, onBeforeMount, ref} from "vue";
import {gameResultWinMap, queueMap, tierMap} from "@share/utils/constants.js";
import moment from "moment/moment.js";
import {map_store, staticAssertsStore} from "@/renderer/main-window/stores/storeAsserts.js";

const {puuid, championId, team} = defineProps({
  "puuid": {},
  "championId": {
    type: Number,
  },
  "team": {
    default: 'blue'
  }
})
const emit = defineEmits(['handleClickSummonerName'])

//弹窗控制
const openGameRecordFunc = (gameId) => {
  currentGameId.value = gameId;
  gamRecordDialogShow.value = true;//打开对话框
}

const gamRecordDialogShow = ref(false);

const currentGameId = ref(null);

const summonerInfo = ref({});
const rankInfo = ref({});
const gameRecordsOrigin = ref([]);


const rankDetailFunc = (type) => {
  const queueMap = rankInfo.value?.queueMap;
  if (queueMap) {
    const {division, tier, leaguePoints, losses, wins} = queueMap[type] || {};
    return {
      tierIcon: tierMap[tier]?.icon,
      tierName: tierMap[tier]?.value,
      leaguePoints: leaguePoints,
      total: losses + wins,
      winRate: wins / (losses + wins),
      division: division
    }
  } else {
    return {}
  }
}

const handleClickName = ({puuid}) => {
  emit('handleClickSummonerName', {puuid})
}

const rankSolo5v5 = computed(() => {
  return rankDetailFunc('RANKED_SOLO_5x5');
})

const rannSR = computed(() => {
  return rankDetailFunc('RANKED_FLEX_SR');
})


const gameRecordLoopList = computed(() => {
  return (gameRecordsOrigin.value || []).map(a => {
    const {queueId, gameMode, gameCreation, teams, mapId, gameId} = a;
    const teamMap = new Map();
    (teams || []).forEach(team => {
      teamMap.set(team.teamId, team);
    })

    const data = a.participants[0];
    const {
      teamId,
      stats: {
        kills, deaths, assists
      },
      championId
    } = data;

    const mapName = staticAssertsStore().getAssertSync({key: map_store, id: mapId})?.name
    const {win} = teamMap.get(teamId);
    return {
      result: gameResultWinMap[win],
      resultCode: win,
      baseInfo: {
        teamId: teamId,
        gameId: gameId,
        gameStartTime: moment.unix(gameCreation / 1000).format("MM-DD HH:mm"),
        queue: {
          "queueId": queueId,
          "queueName": queueMap[queueId],
          "gameMode": gameMode,
        },
        mapInfo: {
          mapId: mapId,
          mapName: mapName
        }
      },
      champion: {
        championId: championId,
        kda: {
          k: kills,
          d: deaths,
          a: assists,
        }
      }
    }
  })
})


onBeforeMount(() => {
  //查询玩家个人信息
  window.api.summoner.getSummonerInfoByPuuid(puuid)
      .then(result => {
        summonerInfo.value = result.data;
      })
  //查询段位
  window.api.rank.getRankedListByPuuid(puuid)
      .then(result => {
        rankInfo.value = result.data;
      })
  //查询英雄场次对局
  //查询历史对局
  window.api.gamereocrd.searchByPuuid({
    puuid: puuid,
    begIndex: 0,
    endIndex: 4
  }).then(res => {
    gameRecordsOrigin.value = res.data?.games?.games || [];
  })
  //同步英雄
})
</script>

<template>
  <div ref="singleGamerInfoContainerRef"
       class="single_summoner_container">
    <!--   玩家基本信息  -->
    <div>
      <!--      静态信息-->
      <div style="display: flex">
        <!--        头像-->
        <div :style="`margin-right:12px`">
          <LcuChampionProfile :champion-id="championId" :size="60"/>
          <CareerHiddenDisplay :hidden-code="summonerInfo?.privacy"/>
        </div>
        <!--        ID 大区 段位-->
        <div style="flex-grow: 1;line-height: 1;display: flex;flex-direction: column;align-items: flex-start">
          <div style="display: flex">
            <LcuSummonerName
                @click="()=>{handleClickName({puuid:summonerInfo.puuid})}"
                :copy-name-to-clip-board="false"
                style="font-weight: bold"
                :truncated="true"
                :show-num="false"
                :name="summonerInfo?.gameName"
                :num="summonerInfo?.tagLine"
            />
            <!--            玩家头像-->
            <LcuProfile :profile-id="summonerInfo?.profileIconId" shape="circle" style="margin-left: 3px" :size="24"/>
          </div>
          <el-divider style="margin:3px 0 "/>
          <div style="display: flex;">
            <el-text style="margin-right: 6px">单双</el-text>
            <div>
              <div style="display: flex">
                <LcuTierIcon :tier-level="rankSolo5v5.tierIcon"/>
                <el-text size="small">{{ rankSolo5v5?.tierName }}{{ rankSolo5v5?.division }}
                  {{ rankSolo5v5?.leaguePoints }}点
                </el-text>
              </div>
              <div style="display: flex;justify-content: center">
                <el-text size="small" style="margin-right: 3px">{{ rankSolo5v5?.total }}场</el-text>
                <!--                胜率-->
                <el-text
                    :type="rankSolo5v5?.winRate>0.5?'success':'danger'"
                    tag="b"
                    size="small">{{ (rankSolo5v5?.winRate * 100).toFixed(0) }}
                </el-text>
                <el-text>%</el-text>
              </div>
            </div>
          </div>
          <div style="display: flex;">
            <el-text style="margin-right: 6px">灵活</el-text>
            <div>
              <div style="display: flex">
                <LcuTierIcon :tier-level="rannSR.tierIcon"/>
                <el-text size="small">{{ rannSR?.tierName }}{{ rannSR?.division }} {{ rannSR?.leaguePoints }}点
                </el-text>
              </div>
              <div style="display: flex;justify-content: center">
                <el-text size="small" style="margin-right: 3px">{{ rannSR?.total }}场</el-text>
                <!--                胜率-->
                <el-text
                    :type="rannSR?.winRate>0.5?'success':'danger'"
                    tag="b"
                    size="small">{{ (rannSR?.winRate * 100).toFixed(0) }}
                </el-text>
                <el-text>%</el-text>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    自定义tag 这里适合开个插槽 调用方自己制定-->
    <div style="width: 100%;height: 24px">
      <slot name="tags">
      </slot>
    </div>

    <!--    战绩列表-->
    <div v-for="(item,idx) in gameRecordLoopList">
      <el-divider style="margin:0"/>
      <el-button link @click="openGameRecordFunc(item.baseInfo.gameId)">
        <div class="game_record_wrapper">
          <!--英雄头像-->
          <div>
            <LcuChampionProfile :champion-id="item?.champion?.championId" :size="28" style="margin-right: 3px"/>
          </div>
          <div style="width: 90px">
            <div>
              <el-text size="small">{{ item?.baseInfo?.queue?.queueName }}</el-text>
              <el-tag :type="item.resultCode==='Win'?'success':'danger'" size="small">{{ item.result }}</el-tag>
            </div>
            <div>
              <el-text>{{ item?.baseInfo?.gameStartTime }}</el-text>
            </div>
          </div>
          <div style="margin: 0 12px">
            <KDA
                :k="item?.champion?.kda?.k"
                :d="item?.champion?.kda?.d"
                :a="item?.champion?.kda?.a"
            />
          </div>
          <div style="align-self: flex-end;width: 36px">
            <!--            <el-tag type="info" size="small">我</el-tag>-->
          </div>
        </div>
      </el-button>
    </div>
  </div>
  <el-dialog v-model="gamRecordDialogShow" destroy-on-close>
    <GameDetailRecordOverview
        :game-id="currentGameId"
        :summoner-info="summonerInfo"
    />
  </el-dialog>
</template>

<style scoped lang="scss">
.game_record_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
  line-height: 1;
}

.single_summoner_container {
  width: 220px;
  height: 350px;
  //flex-grow: 1;
  margin: 12px;
  padding: 12px;
  border-radius: 8px;
  background-color: var(--var-current-game-team-blue-background-color);
}

</style>